<template>
  <view class="page">
    <view class="top">
      <view class="top-flex flex">
        <view class="top-item">
          <view class="top-item-num">{{ obj.virtual_coin||'0' }}</view>
          可用旺币
        </view>
        <view class="top-item">
          <view class="top-item-num">{{ obj.user_points||"0" }}</view>
          可用积分
        </view>
        <view class="top-item">
          <view class="top-item-num">{{ obj.count_today_income||"0" }}</view>
          今日收入
        </view>
        <view class="top-item">
          <view class="top-item-num">{{ obj.count_income||'0' }}</view>
          累计收入
        </view>
      </view>
    </view>
    <view class="box">
      <view class="box-item" @click="handleNav('/pagesB/my/recharge')">
        <image :src="imgApi+'images/wallet/icon-04.svg'" mode="scaleToFill" />
        充值
      </view>
      <view class="box-item" @click="handleNav('/pagesB/my/balance')">
        <image :src="imgApi+'images/wallet/icon-05.svg'" mode="scaleToFill" />
        分润转旺币
      </view>
      <view class="box-item" @click="handleNav('/pagesB/my/wallet/withdrawal')">
        <image :src="imgApi+'images/wallet/icon-06.svg'" mode="scaleToFill" />
        提现
      </view>
      <view class="box-item" @click="handleNav('/pagesB/my/wallet/invoice')">
        <image :src="imgApi+'images/wallet/icon-07.svg'" mode="scaleToFill" />
        开发票
      </view>
      <view class="box-item" @click="handleNav('/pagesB/my/wallet/details')">
        <image :src="imgApi+'images/wallet/icon-08.svg'" mode="scaleToFill" />
        明细
      </view>
      <view class="box-item" style="border: none;" @click="handleNav('/pagesB/my/wallet/points')">
        <image :src="imgApi+'images/wallet/icon-09.svg'" mode="scaleToFill" />
        积分流水
      </view>
    </view>
  </view>
</template>
<script>
import { wallet } from "@/utils/request.js";
export default {
  data() {
    return {
      imgApi:this.$config.imgApi,
      obj:{}
    };
  },
  onLoad(){
    this.wallet().then(res=>{
      if(res){
        this.obj=res
      }
    })
  },
  methods: {
    async wallet(data){
      return await wallet(data)
    },
    handleNav(url) {
      console.log(url,'88')
      uni.navigateTo({ url: url });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 694rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: -48rpx auto 0;
  .box-item {
    width: 636rpx;
    padding: 26rpx 0;
    border-bottom: 1rpx solid#f2f2f2;
    margin: 0 auto;
    display: flex;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 16rpx;
    }
  }
}

.top {
  width: 100%;
  padding: 80rpx 0;
  background: #ffb850;

  .top-flex {
    width: 640rpx;
    margin: 0 auto;
    justify-content: space-between;
    .top-item {
      flex: 1;
      font-size: 24rpx;
      color: #ffffff;

      .top-item-num {
        font-size: 30rpx;
        margin-bottom: 30rpx;
      }
    }
  }
}
</style>